



//放大镜

function BigImg(ele){
    // 1. 选择元素
    this.sBox = document.querySelector(".s_box")
    this.sSpan = document.querySelector(".s_box span")
    this.bBox = document.querySelector(".a_box")
    this.bImg = ele;
    // 2. 执行绑定事件
    this.addEvent();
}
BigImg.prototype.addEvent = function(){
    const that = this;
    // 绑定进入事件：显示
    this.sBox.onmouseover = function(){
        that.sSpan.style.display = "block";
        that.bBox.style.display = "block";
        that.sSpan.style.width =  that.bBox.offsetWidth / that.bImg.offsetWidth *  that.sBox.offsetWidth + "px";
        that.sSpan.style.height = that.bBox.offsetHeight /  that.bImg.offsetHeight *  that.sBox.offsetHeight + "px";
    }
    // 绑定离开事件：隐藏
    this.sBox.onmouseout = function(){
        that.sSpan.style.display = "none";
        that.bBox.style.display = "none";
    }
    // 绑定移动事件：执行移动功能
    this.sBox.onmousemove = function(eve){
        const e = eve || window.event;
        // 3. 执行移动功能
        that.move(e)
    }
}
BigImg.prototype.move = function(e){
    // 4. 先计算要移动的位置
    let l = e.offsetX - this.sSpan.offsetWidth/2;
    let t = e.offsetY - this.sSpan.offsetHeight/2;
 
    // 5. 边界限定
    if(l<0) l=0;
    if(t<0) t=0;
    if(l>this.sBox.offsetWidth-this.sSpan.offsetWidth){
        l=this.sBox.offsetWidth-this.sSpan.offsetWidth
    }
    if(t>this.sBox.offsetHeight-this.sSpan.offsetHeight){
        t=this.sBox.offsetHeight-this.sSpan.offsetHeight
    }
    // 6. 设置给遮罩层
    this.sSpan.style.left = l + "px"
    this.sSpan.style.top = t + "px"
    // 7. 计算遮罩层移动的比例
    const x = l / (this.sBox.offsetWidth-this.sSpan.offsetWidth)
    const y = t / (this.sBox.offsetHeight-this.sSpan.offsetHeight)
    // console.log(x, y)
    // 8. 根据遮罩层移动的比例，计算右侧大图应该移动的距离
    this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
    this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
}
new BigImg(document.querySelector('.a_box .active'))





    
    